<template>
  <view class="interests">
    <view v-for="(item, index) in list" :key="index" class="item px-32rpx py-32rpx flex">
      <view class="icon w-104rpx h-104rpx">
        <image :src="item.icon" class="w-104rpx h-104rpx"></image>
      </view>
      <view class="flex flex-col pl-32rpx">
        <text class="text-#7C5A3C text-28rpx font-bold mt-4rpx">{{ item.title }}</text>
        <text class="mt-24rpx text-#1C213E text-28rpx fw-400">{{ item.desc }}</text>
      </view>
    </view>
  </view>
</template>

<script name="interests" setup>
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  }
});
</script>

<style lang="scss" scoped>
.interests {
  .item {
    margin-bottom: 24rpx;
    background: #faf5ec;
    border-radius: 16rpx;
    .icon {
      min-width: 104rpx;
    }
  }
}
</style>
